<template>
    <div class="study-recommend-wrapper">
      <div class="my-courses-list">
        <div class="courses-item v-flex-row-start">
          <div class="courses-img">
            <img src="/static/mock-image/intro.jpg" alt="">
          </div>
          <div class="courses-intro">
            <div class="title">如何激励你的员工</div>
            <div class="intro">推动企业利润快速增长</div>
            <div class="study-num">15561人学习</div>
            <div class="continue-play v-flex-row-end">
              <div class="play-icon"><img src="/static/image/common/playing.png" alt=""></div>
              <div class="play-text">继续观看</div>
            </div>
          </div>
        </div>
        <div class="courses-item v-flex-row-start">
          <div class="courses-img">
            <img src="/static/mock-image/intro.jpg" alt="">
          </div>
          <div class="courses-intro">
            <div class="title">如何激励你的员工</div>
            <div class="intro">推动企业利润快速增长</div>
            <div class="study-num">15561人学习</div>
            <div class="continue-play v-flex-row-end">
              <div class="play-icon"><img src="/static/image/common/playing.png" alt=""></div>
              <div class="play-text">继续观看</div>
            </div>
          </div>
        </div>


      </div>
    </div>
</template>

<script>
  export default {
    name: ""
  };
</script>

<style scoped lang="less">
  .courses-item {
    background-color:@bg_color;
    padding:26rpx 42rpx 20rpx 26rpx;
    margin-bottom:10rpx;
  }
  .courses-img {
    & > img {
      width:300rpx;
      height:170rpx;
        border-radius:5rpx;
      }
  }
  .courses-intro {
    width:181rpx;
    padding-left:10rpx;
    flex:1;
  }
  .title {
    color:#333;
    font-weight:bold;
    font-size:@font_size_28;
    .overflow-hidden ()

  }
  .intro, .study-num {
    font-size:24rpx;
    color:#B3B4B5;
  .overflow-hidden ()
  }
  .continue-play {
    color:#2B80FF;
    padding-top:8rpx;
    .play-icon {
      font-size:@font_size_24;
      font-weight:400;
      padding:0rpx 6rpx;
      & > img {
        width:26rpx;
        height:26rpx;
        vertical-align:middle;
      }
    }
  }

  .play-text {
    font-size: @font_size_24;
  }
  .overflow-hidden () {
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }
</style>
